<template>
  <Popup
    v-model:show="showPopup"
    position="bottom"
    :style="{ background: 'transparent', overflow: 'hidden' }"
  >
    <div class="vessel">
      <img src="@/assets/image/congratulation.png" class="phone-box-heard" />
      <img src="@/assets/image/coloured-ribbon.png" class="coloured-ribbon" />
      <div class="coloured-ribbon-text">恭喜</div>
      <div class="phone-box">
        <div class="phone-body-box">
          <div class="congratulation-content">
            <div class="content-text-one">
              请您在{{
                dayjs(taskData?.completionTime).format("YYYY年MM月DD日")
              }}之前完成
            </div>
            <div class="content-text-two">
              {{ mainStore?.cobreedingTaskName }}
            </div>
            <div class="content-text-three">
              共有{{ taskData?.taskNumber }}人领取此任务<br />请在{{
                dayjs(taskData?.completionTime).format("YYYY年MM月DD日")
              }}前完成
            </div>
          </div>
        </div>
        <div class="phone-button" @click="closePopup">我已完成并领取奖励</div>
      </div>
    </div>
  </Popup>
</template>
<script lang="ts" setup>
import { completeTaskCo, getTaskCoDetails } from "@/api/common";
import { useMainStore } from "@/store";
import dayjs from "dayjs";
import { Popup } from "vant";
import { computed, ref, watch } from "vue";
const mainStore = useMainStore();
const taskId = computed(() => mainStore.cobreedingTaskId);
const showPopup = defineModel<boolean>("showPopup");
const taskData = ref();
const studentInfo = computed(() => mainStore.studentInfo);
const emit = defineEmits(["update:showPopup"]); // Add emit declaration

function closePopup() {
  completeTaskCo({
    studentId: studentInfo.value.studentId,
    taskId: taskId.value,
  }).then(() => {
    mainStore.refreshTask = true;
    emit("update:showPopup", false); // Change direct assignment to emit
  });
}
watch(showPopup, (val) => {
  if (val) {
    init();
  }
});
function init() {
  getTaskCoDetails(taskId.value).then((res) => {
    taskData.value = res.data;
  });
}
</script>
<style lang="scss" scoped>
.vessel {
  width: 100vw;
  height: 617px;
  position: relative;
  .phone-box-heard {
    position: absolute;
    top: 0px;
    right: -12px;
    width: 308px;
    height: 307px;
  }
  .coloured-ribbon-text {
    position: absolute;
    top: 235px;
    z-index: 888;
    left: 168px;
    width: 217px;
    height: 60px;
    font-family: Source Han Sans;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: 0px;
    font-variation-settings: "opsz" auto;
    color: #ffffff;
  }
  .coloured-ribbon {
    position: absolute;
    top: 230px;
    z-index: 888;
    left: 79px;
    width: 217px;
    height: 60px;
  }
  .phone-box {
    position: absolute;
    bottom: 0;
    left: 9px;
    width: 357px;
    height: 380px;
    border-radius: 30px 30px 0 0;
    opacity: 1;
    background: #f0a773;
    .phone-button {
      min-width: 173px;
      position: absolute;
      bottom: 55px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
      width: 173px;
      height: 44px;
      font-family: Source Han Sans;
      font-size: 16px;
      font-weight: bold;
      line-height: 28px;
      letter-spacing: 0px;
      font-variation-settings: "opsz" auto;
      color: #ffffff;
      border-radius: 100px;
      opacity: 1;
      background: linear-gradient(90deg, #ffc500 0%, #ffb200 100%);
      box-shadow: inset -1px -1px 2px 0px #d89f37,
        inset 1px 1px 2px 0px rgba(255, 255, 255, 0.3);
    }
    .phone-body-box {
      position: absolute;
      top: 28px;
      left: 15px;
      width: 328px;
      height: 524px;
      border-radius: 10px;
      background-color: #ffffff;
    }
    .congratulation-content {
      width: 287px;
      margin: 47px auto;
      height: 210px;
      border-radius: 10px;
      opacity: 1;
      background: linear-gradient(
        180deg,
        #ffe4be 0%,
        rgba(255, 228, 190, 0) 100%
      );
      display: flex;
      align-items: center;
      flex-direction: column;
      .content-text-three {
        margin: 20px 0 0 0;
        font-family: Source Han Sans;
        font-size: 14px;
        font-weight: 350;
        line-height: 22px;
        text-align: center;
        letter-spacing: 0px;
        color: #666666;
      }
      .content-text-two {
        margin: 23px 0 0 0;
        font-family: Source Han Sans;
        font-size: 28px;
        font-weight: 500;
        line-height: 37.8px;
        letter-spacing: 0px;
        font-variation-settings: "opsz" auto;
        color: #e1803b;
      }
      .content-text-one {
        margin: 18px 0 0 0;
        font-family: Source Han Sans;
        font-size: 18px;
        font-weight: bold;
        line-height: 32px;
        letter-spacing: 0px;
        font-variation-settings: "opsz" auto;
        color: #666666;
      }
    }
  }
}
</style>
